<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            border: 2px solid #ddd;
            border-radius: 10px;
            width: 1380px;
            height: 350px;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }

        #prev_btn,
        #next_btn {
            width: 60px;
            height: 60px;
            background: rgba(39, 39, 39, .7);
            display: inline-block;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            position: absolute;
            top: 143px;
            left: 15px;
            z-index: 999;
            cursor: pointer;
        }

        #next_btn {
            position: absolute;
            top: 143px;
            left: 1315px;
        }

        #prev_btn img {
            margin: 7px 5px 0 0;
            width: 45px;
            height: 45px;
        }

        #next_btn img {
            margin: 7px 0 0 5px;
            width: 45px;
            height: 45px;
        }

        /* #banner_container{
            width: 600%;
        } */
        #banner_container {
            position: absolute;
            /* transition: all .5s; */
            width: 8280px;
        }

        #banner_container li {
            list-style: none;
            float: left;
            width: 1380px;
            height: 350px;
        }

        #banner_container li img {
            width: 1380px;
            height: 350px;
        }
    </style>
</head>

<body>
    <div id="container">
        <a id="prev_btn"><img src="img/zuo-copy.png" /></a>
        <a id="next_btn"><img src="img/you-copy.png" /></a>
        <ul id="banner_container">
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/0138ec5ca44892a801208f8be4c0ea.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01b73c5ca2ca82a801214168fa83fa.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01037e5ca2ca93a801208f8b8d457d.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01da355ca419dfa8012141682afdd2.jpg@1380w" alt=""></li>
            <li><img src="https://img.zcool.cn/community/01f1515ca2ca6da801214168c2ae09.jpg@1380w" alt=""></li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
<script>
    function autoplay() {
        this.prev_btn = document.querySelector('#prev_btn')
        this.next_btn = document.querySelector('#next_btn')
        this.banner_box = document.querySelector('#banner_container')
        this.banner_lis = this.banner_box.querySelectorAll('li')
        this.index = 0
        this._click()
    }
    autoplay.prototype._click = function () {
        var self = this
        // 点击左边
        console.log(this.prev_btn)
        this.prev_btn.onclick = function () {
            if (self.index == 0) {
                // 当index索引为0的时候，让ul这个大框的left到ul的倒数第二张的位置，这个步骤用户看不到，太快了，这样子ul这个大框就往左移了，就不会可以继续减了
                self.banner_box.style.left = -(self.banner_lis.length - 1) * 1380 + 'px'
                // 本来index是0的，我们把它变成index为4，那么当我们点击的时候，index索引就传进move中去了，这样就可以了
                self.index = self.banner_lis.length - 2
            } else {
                self.index--
            }
            self.move()
        }
        this.next_btn.onclick = function () {
            if (self.index == self.banner_lis.length - 1) {
                // 当图片为最后一张的时候，我们需要把ul的left变成0,本来最后一张是和第一张一样的,所以用户不知道我们把ul的left值变成了0
                self.banner_box.style.left = 0
                // 然后把索引变成1，这样，到时候运动就可以从第二张图片开始播放了，就毫无破绽
                self.index = 1
            } else {
                self.index++
            }
            self.move()
        }
    }
    autoplay.prototype.move = function () {
        var self = this
        $(this.banner_box)
            // 当我们连续点两次的时候
            .stop()
            .animate({
                left: -1380 * self.index + 'px'
            }, 100)
    }
    var play = new autoplay()
    console.log(play.banner_lis.length)
</script>

</html>